<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '阅读记录',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view class="w-full flex flex-col box-border" :style="{ height: contentHeight + 'rpx' }">
			<view class="w-full px-4 py-4 box-border flex justify-between items-center">
				<view
					class="text-[36rpx] w-[50%] text-center relative font-bold"
					:style="{ color: tabKey === 'underway' ? '#34A4E2' : '#303030' }"
					@tap="changeTab('underway')"
				>
					正在读<text class="text-[24rpx] font-bold">(1)</text>
					<text
						v-if="tabKey === 'underway'"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[20rpx]"
						style="background: #34a4e2"
					></text>
				</view>
				<view
					class="text-[36rpx] w-[50%] text-center relative font-bold"
					:style="{ color: tabKey === 'over' ? '#34A4E2' : '#303030' }"
					@tap="changeTab('over')"
				>
					已读完<text class="text-[24rpx] font-bold">(1)</text>
					<text
						v-if="tabKey === 'over'"
						class="w-[29rpx] h-[10rpx] rounded-[5rpx] absolute left-[50%] -translate-x-[50%] -bottom-[20rpx]"
						style="background: #34a4e2"
					></text>
				</view>
			</view>
			<scroll-view class="w-full flex-1" style="height: calc(100% - 114rpx)" scroll-y>
				<view class="w-full px-4 py-4 box-border">
					<view
						class="bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mb-4 last:mb-0"
					>
						<image
							class="w-[212rpx] h-[250rpx] rounded-[30rpx]"
							:src="baseImg + '/img-shangcixuedao.png'"
						></image>
						<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
							<view class="w-full flex flex-col">
								<text class="text-[33rpx] font-bold text-[#303030]">中国民间故事</text>
								<text class="text-[22rpx] text-[#303030] mt-1">中国民间故事</text>
								<text class="text-[22rpx] text-[#919191] mt-1 line-clamp-2"
									>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井</text
								>
							</view>
							<view class="w-full flex justify-end items-center">
								<view
									class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
									:style="{ background: '#2BA5E0' }"
									>开始学习</view
								>
							</view>
						</view>
					</view>
					<view
						class="bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mb-4 last:mb-0"
					>
						<image
							class="w-[212rpx] h-[250rpx] rounded-[30rpx]"
							:src="baseImg + '/img-shangcixuedao.png'"
						></image>
						<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
							<view class="w-full flex flex-col">
								<text class="text-[33rpx] font-bold text-[#303030]">中国民间故事</text>
								<text class="text-[22rpx] text-[#303030] mt-1">中国民间故事</text>
								<text class="text-[22rpx] text-[#919191] line-clamp-2 mt-1"
									>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井</text
								>
							</view>
							<view class="w-full flex justify-between items-center">
								<view class="flex items-center">
									<image
										class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
										:src="baseImg + '/img-shangcixuedao.png'"
									></image>
									<view class="w-[153rpx] flex flex-col items-center justify-center">
										<text class="text-[#48C855] text-[21rpx]">学习进度37%</text>
										<view
											class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
											:style="{ background: '#F2F0F3' }"
										>
											<view
												class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
												:style="{ background: '#48C855', width: 37 + '%' }"
											></view>
										</view>
									</view>
								</view>
								<view
									class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
									:style="{ background: '#48C855' }"
									>继续学习</view
								>
							</view>
						</view>
					</view>
					<view
						class="bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mb-4 last:mb-0"
					>
						<image
							class="w-[212rpx] h-[250rpx] rounded-[30rpx]"
							:src="baseImg + '/img-shangcixuedao.png'"
						></image>
						<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
							<view class="w-full flex flex-col">
								<text class="text-[33rpx] font-bold text-[#303030]">中国民间故事</text>
								<text class="text-[22rpx] text-[#303030] mt-1">中国民间故事</text>
								<text class="text-[22rpx] text-[#919191] line-clamp-2 mt-1"
									>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井</text
								>
							</view>
							<view class="w-full flex justify-between items-center">
								<view class="flex items-center">
									<image
										class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
										:src="baseImg + '/img-shangcixuedao.png'"
									></image>
									<view class="w-[153rpx] flex flex-col items-center justify-center">
										<text class="text-[#F1BF10] text-[21rpx]">已学完100%</text>
										<view
											class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
											:style="{ background: '#F2F0F3' }"
										>
											<view
												class="h-full absolute top-0 left-0 w-full rounded-[5rpx]"
												:style="{ background: '#F1BF10' }"
											></view>
										</view>
									</view>
								</view>
								<view
									class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
									:style="{ background: '#F1BF10' }"
									>再次学习</view
								>
							</view>
						</view>
					</view>

					<view
						class="bg-white rounded-[30rpx] px-4 py-4 box-border flex justify-between items-center mb-4 last:mb-0"
					>
						<image
							class="w-[212rpx] h-[250rpx] rounded-[30rpx]"
							:src="baseImg + '/img-shangcixuedao.png'"
						></image>
						<view class="flex-1 pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between">
							<view class="w-full flex flex-col">
								<text class="text-[33rpx] font-bold text-[#303030]">中国民间故事</text>
								<text class="text-[22rpx] text-[#303030] mt-1">中国民间故事</text>
								<text class="text-[22rpx] text-[#919191] line-clamp-2 mt-1"
									>中国民间故事由思维当代童话名家陈伯吹、金近、汤素兰、严文井</text
								>
							</view>
							<view class="w-full flex justify-between items-center">
								<view class="flex items-center">
									<image
										class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
										:src="baseImg + '/img-shangcixuedao.png'"
									></image>
									<view class="w-[153rpx] flex flex-col items-center justify-center">
										<text class="text-[#F1BF10] text-[21rpx]">已学完100%</text>
										<view
											class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
											:style="{ background: '#F2F0F3' }"
										>
											<view
												class="h-full absolute top-0 left-0 w-full rounded-[5rpx]"
												:style="{ background: '#F1BF10' }"
											></view>
										</view>
									</view>
								</view>
								<view
									class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-4 flex justify-center items-center"
									:style="{ background: '#F1BF10' }"
									>再次学习</view
								>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();
const tabKey = ref('underway'); // over

const changeTab = (key: string) => {
	tabKey.value = key;
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}
</style>
